<script setup>
import {message} from 'ant-design-vue';
import {ref} from 'vue';
import {residentInfoAdd, residentInfoUpdate, residentInfoOne} from '@/api/residentInfoApi.js';
import {CheckOutlined, CloseOutlined} from '@ant-design/icons-vue';


const open = ref(false);
const formRef = ref(null);
const emits = defineEmits(['saveSuccessful'])
import {loading} from '@/utils/loadingUtils.js';
import * as commonDict from '@/utils/commonDict.js'

const form = ref({
  name: '',
  gender: undefined,
  age: '',
  phoneNumber: '',
  address: '',
  createTime: '',
})

const onOpen = (id) => {
  if (id) {
    handleUpdate(id)
  }
  open.value = true
}

const handleUpdate = (id) => {
  residentInfoOne(id).then(res => {
    form.value = res
    onOpen()
  })
}
const onClose = () => {
  open.value = false
  resetForm()
}


const resetForm = () => {
  formRef.value.resetFields();
  form.value.id = ''
};


const submit = () => {
  formRef.value.validate().then(async () => {
    if (form.value.id) {
      await residentInfoUpdate(form.value)
    } else {
      await residentInfoAdd(form.value)
    }
    message.success(form.value.id ? '更新成功' : '保存成功')
    emits('saveSuccessful')
    onClose()
  })
}

defineExpose({
  onOpen
})
</script>

<template>

  <a-modal @ok="submit" v-model:open="open" width="700px" @cancel="onClose" @close="onClose">
    <a-form :model="form" ref="formRef" layout="vertical">
      <a-form-item
          label="住户姓名"
          name="name"
          :rules="[{ required: true, message: '请输入住户姓名' }]"
      >
        <a-input
            placeholder="请输入住户姓名"
            v-model:value="form.name"></a-input>
      </a-form-item>
      <a-form-item
          label="性别"
          name="gender"
          :rules="[{ required: true, message: '请选择性别' }]"
      >
        <a-select
            placeholder="请选择性别"
            :options="Object.keys(commonDict.genderType).map(x => ({label:commonDict.genderType[x],value:x}))"
            v-model:value="form.gender"></a-select>
      </a-form-item>
      <a-form-item
          label="年龄"
          name="age"
          :rules="[{ required: true, message: '请输入年龄' }]"
      >
        <a-input
            placeholder="请输入年龄"
            v-model:value="form.age"></a-input>
      </a-form-item>
      <a-form-item
          label="联系电话"
          name="phoneNumber"
          :rules="[{ required: true, message: '请输入联系电话' }]"
      >
        <a-input
            placeholder="请输入联系电话"
            v-model:value="form.phoneNumber"></a-input>
      </a-form-item>
      <a-form-item
          label="住址"
          name="address"
          :rules="[{ required: true, message: '请输入住址' }]"
      >
        <a-input
            placeholder="请输入住址"
            v-model:value="form.address"></a-input>
      </a-form-item>

    </a-form>
  </a-modal>

</template>

<style scoped>

</style>
